<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue-light"  :isBack="true" backText="返回" title="更多基本信息"></cu-custom>
		<zh-picker
			pickerRef="sex"
			label="性别"
			labelAlign="left"
			justifyContent="space-between"
			mode="selector"
			:options="sexData"
			rightIconClass="text-gray"
			:value="formData.sex"
			placeholder="请选择性别"
			themeColor="#FC7983"
			@pickerChange="onSexChange($event)"
			ref="sex"
		></zh-picker>
		<zh-picker
			pickerRef="birthday"
			mode="date"
			startYear="1920" 
			label="出生日期"
			themeColor="#FC7983"
			labelAlign="left"
			rightIconClass="text-gray"
			justifyContent="space-between"
			:value="formData.birthday"
			fields="day"
			ref="birthday"
			@pickerChange="onBirthdayChange($event)"
		></zh-picker>
		<zh-address
			label="户籍所在地"
			labelWidth="200rpx"
			labelAlign="left"
			placeholder="请选择省市区"
			justifyContent="space-between"
			ref='addressSelect'
			addressRef="addressSelect"
			:value="addressValue"
			rightIconClass="text-gray"
			@addressChange="successSelectAddress"
		>
		</zh-address>
		<zh-input v-model="formData.householdDetail" type="text" labelWidth="200rpx" label="详细地址" labelAlign="left" inputAlign="right" ></zh-input>
		<zh-picker
			pickerRef="nation"
			label="民族"
			labelAlign="left"
			justifyContent="space-between"
			mode="selector"
			:options="dictData.nation"
			rightIconClass="text-gray"
			:value="formData.nation"
			placeholder="请选择民族"
			themeColor="#FC7983"
			@pickerChange="onNationChange($event)"
			ref="nation"
		></zh-picker>
		<zh-picker
			pickerRef="politicalInfo"
			label="政治面貌"
			labelAlign="left"
			justifyContent="space-between"
			mode="selector"
			:options="dictData.politicalInfo"
			rightIconClass="text-gray"
			:value="formData.politicalInfo"
			placeholder="请选择政治面貌"
			themeColor="#FC7983"
			@pickerChange="onPoliticalInfoChange($event)"
			ref="politicalInfo"
		></zh-picker>
		<zh-picker
			pickerRef="marriageStatus"
			label="婚姻状况"
			labelAlign="left"
			justifyContent="space-between"
			mode="selector"
			:options="marriageStatusData"
			rightIconClass="text-gray"
			:value="formData.marriageStatus"
			placeholder="请选择婚姻状况"
			themeColor="#FC7983"
			@pickerChange="onMarriageStatusChange($event)"
			ref="marriageStatus"
		></zh-picker>
		<zh-picker
			pickerRef="occupation"
			label="职业/工种"
			labelWidth="200rpx"
			labelAlign="left"
			justifyContent="space-between"
			mode="selector"
			:options="dictData.occupation"
			rightIconClass="text-gray"
			:value="formData.occupation"
			placeholder="请选择职业/工种"
			themeColor="#FC7983"
			@pickerChange="onOccupationChange($event)"
			ref="occupation"
		></zh-picker>
		<zh-input v-model="formData.hobby" placeholder="未填写" type="textarea" inputMaxlength="250" label="爱好" labelAlign="left" inputAlign="left" ></zh-input>
		<zh-input v-model="formData.expertise" placeholder="未填写" type="textarea" inputMaxlength="250" label="专长" labelAlign="left" inputAlign="left" ></zh-input>
		<view style="padding: 0 30rpx 0 30rpx;" class="flex flex-direction " >
			<button class="cu-btn shadow margin-tb-sm lg bg-gradual-blue-light"  @tap="saveUser">保存</button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import store from "@/store"
	import api from '@/api/system/base.js'
	import commonApi from '@/api/system/common.js'
	export default {
		data() {
			return {
				sexData: [{ dictKey: '1', dictValue: '男' },
						  { dictKey: '2', dictValue: '女' }],
				dictData:{},
				marriageStatusData:[{ dictKey: '0', dictValue: '未婚' },
									{ dictKey: '1', dictValue: '已婚' }],
			    formData:{},
				addressValue:['330000','330700']
			}
		},
		onLoad: function (option) {
			this.getPersonInfo()
		},
		onReady() {
			// 数据字典初始化
			const data = {}
			data.dictFields = 'occupation,nation,politicalInfo'
			this.$http.post(commonApi.getDictBatch, data).then(res => {
				this.dictData = res.result
			}).catch(error => {
					
			})
		},
		methods: {
			onSexChange(e){
				this.formData.sex = e.value;
			},
			onNationChange(e){
				this.formData.nation = e.value;
			},
			onPoliticalInfoChange(e){
				this.formData.politicalInfo = e.value;
			},
			onMarriageStatusChange(e){
				this.formData.marriageStatus = e.value;
			},
			onBirthdayChange(e){
				this.formData.birthday = e.value;
			},
			onOccupationChange(e){
				this.formData.occupation = e.value;
			},
			onCityClick(){
				this.$refs.addressSelect.show();
			},
			successSelectAddress(data){
				if(data){
					this.formData.householdProvinceKey = data.province.value
					this.formData.householdProvinceValue = data.province.label
					if(data.city.label){
						this.formData.householdCityKey = data.city.value
						this.formData.householdCityValue = data.city.label
					}
					if(data.county.label){
						this.formData.householdCountyKey = data.county.value
						this.formData.householdCountyValue = data.county.label
					}
					if(data.town.label){
						address = address+"-"+data.town.label
						this.formData.householdStreetKey = data.town.value
						this.formData.householdStreetValue = data.town.label
					}
				}
			},
			saveUser(){
				this.$http.post(api.saveUser, this.formData).then(res => {
					this.$refs.uToast.show({
						title: '保存成功',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'success', 
						position:'top',
						// 如果不需要图标，请设置为false
						icon: false
					})
				}).catch(error => {
						
				})
			},
			getPersonInfo(){
				const data = {}
				this.$http.post(api.getPersonDetail, data).then(res => {
					if(res.result){
						this.formData = res.result
						if(!res.result.country){
							this.formData.country='cn'
						}
						const addressValue = []
						if(res.result.householdProvinceKey){
							addressValue.push(res.result.householdProvinceKey)
							if(res.result.householdCityKey){
								addressValue.push(res.result.householdCityKey)
								if(res.result.householdCountyKey){
									addressValue.push(res.result.householdCountyKey)
									if(res.result.householdStreetKey){
										addressValue.push(res.result.householdStreetKey)
									}
								}
							}
						}
						if(addressValue.length>0){
							this.addressValue = addressValue
						}
					}
				}).catch(error => {
					
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
